<{include file="top.html" }>
</head>
<body>
<style>
    .ticketContainer
    {
        background-image:url(<{$preStaticUrl}>Wap/images/ticketBGLarge2.png);
        background-size:100% 100%;
        background-repeat:no-repeat;
        padding:1rem;
    }

    .firstElem{
        height:21rem;
    }
    .secondElem{
        height:17.25rem;
    }
    .QRCode{
        margin-top:1rem;
        margin-bottom:1rem;
        width:11rem;
        display:block;
    }
    .verifyCodeInput{
        background-color:#eee;
        width:18.4rem;
        height:3.9rem;
        border:none;
    }
    .hx-box{padding:3rem 0 6rem 0; text-align:center;}
    .hx-box dl i{display:inline-block; width:60%; height:3rem; background:#eee; vertical-align:middle;}

</style>
<div class="xy-panel">
    <div class="xy-panel-top">
        <div class="xy-titlebar">
          <div class="xy-titlebar-left">
           </div>
          <div class="xy-titlebar-title">卡券商户核销</div>
          <div class="xy-titlebar-right"></div>
        </div>
      </div>
      <div class="xy-panel-content" style="bottom:0;padding:1.5rem 1rem;">
        <div class="xy-row vDirectionRow ticketContainer">
        	<div class="firstElem">
                <div class="hAlignCenterDiv" style="margin-top:1.5rem">
                	<div class="fontSizeXXL boldText blackFont Card" id="cardTitle">券名</div>
                	<div class="fontSizeM Card" id="time">YYYY年MM月DD日至YYYY年MM月DD日</div>
                	<div class="fontSizeM Card" id="reason"></div>
                </div>
            </div>

            <div class="secondElem vAlignCenterRow hAlignCenterRow">
                <div class="hAlignCenterDiv">
                    <div style="margin-bottom:1.5rem">核销号：<input class="verifyCodeInput" id="codeInput" name="codeInput" /></div>
                    <div class="xy-button" id="scan-btn" style="width:10rem; display:inline-block;">扫二维码</div>
                    <div class="xy-button" id="consume-btn" style="width:10rem; display:inline-block;">验证卡券</div>
                </div>
            </div>
        </div>
    </div>
</div>
<{include file="signBody.html"}>
<script>
    $("#scan-btn").click(function(){scan();});
    var checked=false;
    $("#consume-btn").click(function(){
        if(window.checked){
            shopConsume();
        }else{
            queryCode();
        }

    });

    function showWord(checked){
        if(checked){
            $('#consume-btn').text('核销卡券');
        }else{
            $('#consume-btn').text('验证卡券');
        }
        window.checked=checked;
    }

    function scan(){
        wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                var code = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                $('#codeInput').val(code);
                queryCode();
            }
        });
    }


    function queryCode(){
        var code=$('#codeInput').val();
        $.getJSON("<{u('queryCode')}>",{'code':code},function(result){
                if(result.status!=0){
                    layer.msg(result.msg);
                    return;
                }
                $('#cardTitle').text(result.data.cardTitle);
                $('#time').text(result.data.duration);
                $('#shop').text(result.data.restaurantName);
            if(result.canConsume==0){
                $('#reason').text("可以核销");
                showWord(true);
            }else{
                $('#reason').text(result.reason);
                showWord(false);
            }

        })
    }
    function shopConsume(){
        var code=$('#codeInput').val();
        $.getJSON("<{u('shopConsumeDo')}>",{'code':code},function(result){
            layer.msg(result.msg);
            $('#reason').text(result.msg);
            if(result.status==0){
                showWord(false);
            }
        });
    }

</script>
</body>
</html>